<template>
	<!-- 我的红包 -->
	<view class="redbag">
		<view class="redbag_navigation">
			<view class="navigation_block  navigation_block_color" :class="{navigationFontColor:isNavigation==0}" @click="onClickNavigation(0)">未使用
				<view class="baseline" :class="{baselineBg:isNavigation==0}"></view>
			</view>
			<view class="navigation_block navigation_block_color" :class="{navigationFontColor:1==isNavigation}" @click="onClickNavigation(1)">已使用<view
				 class="baseline" :class="{baselineBg:isNavigation==1}"></view>
			</view>
			<view class="navigation_block  navigation_block_color" :class="{navigationFontColor:2==isNavigation}" @click="onClickNavigation(2)">已过期<view
				 class="baseline" :class="{baselineBg:isNavigation==2}"></view>
			</view>
		</view>
		<!--未使用-->
		<view class="coupon"  v-if="0==isNavigation">
			<view class="coupon_top redBg">
				<view class="coupon_top_left">
					<view class="coupon_money onUsed_fontColor">￥2</view>
				</view>
				<view class="coupon_top_center">
					<view class="full_reduction onUsed_fontColor">满100元可用</view>
					<view class="due_date onUsed_fontColor">2021.04.02 16:38到期</view>
				</view>
				<view class="coupon_top_right">
					<view class="startUsing_button">开始使用</view>
				</view>
			</view>
			<view class="coupon_bottom onUsed_fontColor redBg">
				仅限【普通投注、跟单】使用，所有采种可用
				<view class="circular circular_left"></view>
				<view class="circular circular_right"></view>
			</view>
		</view>


		<!--已使用-->
		<view class="coupon  coupon_bg"   v-if="1==isNavigation">
			<view class="coupon_top  coupon_top_lineColor">
				<view class="coupon_top_left">
					<view class="coupon_money Used_fontColor">￥2</view>
				</view>
				<view class="coupon_top_center">
					<view class="full_reduction Used_fontColor">满100元可用</view>
					<view class="due_date Used_fontColor">2021.04.02 16:38到期</view>
				</view>
				<view class="coupon_top_right">
					<view class="startUsing_button  Used_fontColor  coupon_bg">已使用</view>
				</view>
			</view>
			<view class="coupon_bottom  Used_fontColor">
				仅限【普通投注、跟单】使用，所有采种可用
				<view class="circular circular_left"></view>
				<view class="circular circular_right"></view>
			</view>
		</view>

		<!--过期-->
		<view class="coupon  coupon_bg"  v-if="2==isNavigation" >
			<view class="coupon_top  coupon_top_lineColor">
				<view class="coupon_top_left">
					<view class="coupon_money  Used_fontColor">￥2</view>
				</view>
				<view class="coupon_top_center">
					<view class="full_reduction Used_fontColor">满100元可用</view>
					<view class="due_date  Used_fontColor">2021.04.02 16:38到期</view>
				</view>
				<view class="coupon_top_right">
					<view class="startUsing_button  Used_fontColor coupon_bg">已过期</view>
				</view>
			</view>
			<view class="coupon_bottom  Used_fontColor">
				仅限【普通投注、跟单】使用，所有采种可用
				<view class="circular circular_left"></view>
				<view class="circular circular_right"></view>
			</view>
		</view>
       <view class="inTheEnd"  v-if="isEnd">  没有更多了</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { //0未使用  1已使用  2过期
				isNavigation: 0,
                isEnd:false
			}
		},
		onReachBottom(){
			//模拟懒加载
			
			//没有数据了在更改 到底了
			    this.isEnd=true;
				console.log("到底了")
			},
		methods: {
			onClickNavigation(index) {
				this.isNavigation = index
				//点击导航栏实  到底了还原
				this.isEnd=false;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.redbag_navigation {
	//	position: fixed;
	//	background-color: #fff;
		height: 89rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		flex-wrap: wrap; //
		align-content: flex-start;
		background: #fff;
		.navigation_block {
			flex: 3;
			height: 100%;
			line-height: 89rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			position: relative;
		}

	}

	.baseline {
		width: 80rpx;
		height: 4rpx;
		background-color:transparent;
		border-radius: 2rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.coupon {
		width: 710rpx;
		height: 208rpx;
		background: linear-gradient(-90deg, #FC6655 0%, #F22F29 100%);
		border-radius: 10rpx;
		margin: 16rpx auto 0;
	}
	.redBg{
		background: linear-gradient(-90deg, #FC6655 0%, #F22F29 100%) !important;
	}
	
	.coupon_top {
		width: 100%;
		height: 120rpx;
		border-bottom: 1rpx dashed #fff;
		background: #EFEFEF;
	}

	.coupon_top_lineColor {
		border-bottom: 1rpx dashed #737C8A;
	}

	.coupon_top_left {
		width: 140rpx;
		height: 100%;
		float: left;
	}

	.coupon_money {
		box-sizing: border-box;
		display: inline-block;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 42rpx;
		float: right;
		padding-right: 28rpx;
		border-right: 1rpx solid #fff;
	}

	.coupon_top_center {
		float: left;
		height: 100%;
		width: 412rpx;
	}

	.full_reduction {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin: 19rpx 0 19rpx 32rpx;
	}

	.due_date {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-left: 32rpx;
	}

	.coupon_top_right {
		line-height: 120rpx;
		width: 158rpx;
		height: 100%;
		float: left;
	}

	.startUsing_button {
		display: inline-block;
		width: 139rpx;
		height: 58rpx;
		background-color: #fff;
		line-height: 58rpx;
		text-align: center;
		border-radius: 29rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F22F29;
	}

	.coupon_bottom {
		position: relative;
		line-height: 86rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		box-sizing: border-box;
		padding-left: 48rpx;
		background: #EFEFEF;
	}

	.circular {
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		background-color: #f7f8fc;
		border-radius: 50%;
		top: 0;
	}

	.circular_left {
		left: 0;
		transform: translate(-50%, -50%);
	}

	.circular_right {
		right: 0;
		transform: translate(50%, -50%);
	}

	.onUsed_fontColor {
		color: #fff;
	}

	.Used_fontColor {
		color: #737C8A;
	}

	.coupon_bg {
		background: #F7F8F9;
	}

	.navigation_block_color {
		color: #333;
	}

	.navigationFontColor {
		color: #F22F29;
	}

	.baselineBg {
		background-color: #F22F29;
	}
	
	.inTheEnd{
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 48rpx;
	}
</style>
